<style lang="sass" scoped>
    .system{
        li{
            display:inline-block; 
        }  
    }
    .system li a:hover{color:#fff!important;}
    .block_alert_cheng .conmain{
        min-width:500px;
    }
    .danger{
        background:#fbd5d5;
    }
</style>

<template>
<div class="container-fluid">
    <div class="row comm_conent_padding">
        <nav-bar><li slot="nav_two">公司管理</li></nav-bar>

        <!-- 账户列表 -->
        <div class="common_block">
            <div class="head head-default">
                <i class="largeiconfont">&#xe625;</i>
                <span>公司列表</span>
            </div>
            <!-- 列表详情 -->
            <div class="content pd15">
                <div class="mb20">
                    <button class="btn btn-primary" v-on:click="addCount('add')" type="button">新增公司</button>
                    <div class="float-right">
                    </div>
                </div>
                <div class="table-responsive" v-show="conpanyLlist.length">
                    <table class="table table-bordered table_color">
                        <tr class="tr_default">
                            <th>公司名称</th>
                            <th>公司编码</th>
                            <th>集成权限code</th>
                            <th>集成活动权限code</th>
                            <th>正式权限code</th>
                            <th>正式活动权限code</th>
                            <th>激活状态</th>
                            <th>操作</th>
                        </tr>
                        <tr :class="{'danger':item.isUse==0?true:false}" v-for="item in conpanyLlist">
                            <td class="tc" v-text="item.companyName"></td>
                            <td class="tc" v-text="item.companyCode"></td>
                            <td class="tc" v-text="item.distCode"></td>
                            <td class="tc" v-text="item.distAcCode"></td>
                            <td class="tc" v-text="item.onlneCode"></td>
                            <td class="tc" v-text="item.onlineAcCode"></td>
                            <td class="tc" v-text="item.isUse==1?'激活':'禁用'"></td>
                            <td>
                                <button class="btn btn-sm" 
                                    :class="{'btn-info':item.isUse==0?true:false,'btn-danger':item.isUse==1?true:false}" type="button" 
                                    v-on:click="isActiOrDisable(item)" >{{item.isUse==0?'激活':'禁用'}}</button>
                                <button class="btn btn-success btn-sm" v-on:click="addCount('update',item)" type="button">修改</button>

                                <router-link class="btn btn-primary btn-sm"  :to="{name:'distHome',query:{'companyCode': item.companyCode}}">集成环境发布</router-link>
                                <router-link class="btn btn-info btn-sm"  :to="{name:'onlineHome',query:{'companyCode': item.companyCode}}">生产环境发布</router-link>

                               
                            </td>
                        </tr>
                    </table>

                    <div class="tc mt30" v-show="!conpanyLlist.length">还没有公司额，新增一个吧!</div>

                </div>
            </div>        
        </div>

        <!-- 新增 | 修改 公司 -->
        <modal :backdrop="false" :show="modal.show" :title="modal.title" :callback ="onSubmit" @onPropsChange="change">
            <div slot="modal-body">
                <div class="main pd15">
                    <div class="block overflow mb10">
                        <div class="left fl mr20 mt5 w-150 tr">公司名称:</div>
                        <div class="right fl"><input type="text" class="form-control w-300" v-model="modal.companyName" ></div>
                    </div>
                    <div class="block overflow mb10">
                        <div class="left fl mr20 mt5 w-150 tr">公司编码:</div>
                        <div class="right fl"><input type="text" class="form-control w-300" v-model="modal.companyCode"></div>
                    </div>
                    <div class="block overflow mb10">
                        <div class="left fl mr20 mt5 w-150 tr">集成wesocket链接:</div>
                        <div class="right fl"><input type="text" class="form-control w-300" v-model="modal.distSocketSrc"></div>
                    </div>
                    <div class="block overflow mb10">
                        <div class="left fl mr20 mt5 w-150 tr">集成http活动链接:</div>
                        <div class="right fl"><input type="text" class="form-control w-300" v-model="modal.distAcHttpSrc"></div>
                    </div>
                    <div class="block overflow mb10">
                        <div class="left fl mr20 mt5 w-150 tr">正式http活动链接:</div>
                        <div class="right fl"><input type="text" class="form-control w-300" v-model="modal.onlineAcHttpSrc"></div>
                    </div>
                    <div class="block overflow mb10">
                        <div class="left fl mr20 mt5 w-150 tr">集成环境活动路径:</div>
                        <div class="right fl"><input type="text" class="form-control w-300" v-model="modal.distAcServerDir"></div>
                    </div>
                    <div class="block overflow mb10">
                        <div class="left fl mr20 mt5 w-150 tr">正式环境活动路径:</div>
                        <div class="right fl"><input type="text" class="form-control w-300" v-model="modal.onlineAcServerDir"></div>
                    </div>
                    <div class="block overflow mb10">
                        <div class="left fl mr20 mt5 w-150 tr">集成权限code:</div>
                        <div class="right fl"><input type="text" class="form-control w-300" v-model="modal.distCode"></div>
                    </div>
                    <div class="block overflow mb10">
                        <div class="left fl mr20 mt5 w-150 tr">集成活动权限code:</div>
                        <div class="right fl"><input type="text" class="form-control w-300" v-model="modal.distAcCode"></div>
                    </div>
                    <div class="block overflow mb10">
                        <div class="left fl mr20 mt5 w-150 tr">正式权限code:</div>
                        <div class="right fl"><input type="text" class="form-control w-300" v-model="modal.onlneCode"></div>
                    </div>
                    <div class="block overflow mb10">
                        <div class="left fl mr20 mt5 w-150 tr">正式活动权限code:</div>
                        <div class="right fl"><input type="text" class="form-control w-300" v-model="modal.onlineAcCode"></div>
                    </div>
                    <div class="block overflow mb10">
                        <div class="left fl mr20 mt5 w-150 tr">激活状态:</div>
                        <div class="right fl">
                            <select class="form-control w-300" v-model="modal.isUse">
                                <option value="1">激活</option>
                                <option value="0">禁用</option>
                            </select>
                        </div>
                    </div>

                    
                </div>
            </div>
        </modal>

    </div>    
</div>
</template>

<script>
    import navBar from 'components/navBar' 
    import modal from 'components/modal'

    export default {
        components: {
            navBar,
            modal,
        },
        data(){
            return {
                conpanyLlist:[],
                modal:{
                    show:false,
                    title:'',
                    api:'',
                    id:'',
                    companyCode:'',
                    companyName:'',
                    distSocketSrc:'',
                    distCode:'',
                    distAcCode:'',
                    onlneCode:'',
                    onlineAcCode:'',
                    distAcHttpSrc:'',
                    onlineAcHttpSrc:'',
                    distAcServerDir:'',
                    onlineAcServerDir:'',
                    isUse:1,
                },
                
            }
        },
        mounted() {
            this.$nextTick(()=>{
                this.getCompanyList();
            })

        },
        methods: {
            change(propName,newVal,oldVal){
                this.modal[propName]=newVal;
            },
            // 获得公司列表
            getCompanyList(){
                util.ajax({
                    url:config.baseApi+'api/getCompanyList',
                    success:data=>{
                        this.conpanyLlist = data.data;
                    }
                })
            },

            // 激活 || 禁用
            isActiOrDisable(item){
                popup.confirm({title:`确定${item.isUse==0?'激活':'禁用'}吗？`,yes:()=>{
                    util.ajax({
                        url:config.baseApi+'api/activOrDisable',
                        data:{
                            id:item.id,
                            isUse:item.isUse
                        },
                        success:data=>{
                            this.getCompanyList();
                            popup.miss({title:'操作成功!'})
                        }
                    })
                }})
            },

            addCount(type,item){
                this.modal = util.emptyJson(this.modal)
                this.modal.isUse = 1
                this.modal.show = true;

                if(type == 'add'){
                    this.modal.api = `api/addCompany`
                    this.modal.title ='新增公司'
                }else if(type == 'update'){
                    this.modal.api               = `api/updateCompany`
                    this.modal.title             = '修改公司',
                    this.modal.id                = item.id
                    this.modal.companyCode       = item.companyCode 
                    this.modal.companyName       = item.companyName 
                    this.modal.distSocketSrc     = item.distSocketSrc 
                    this.modal.distCode          = item.distCode 
                    this.modal.distAcCode        = item.distAcCode 
                    this.modal.onlneCode         = item.onlneCode 
                    this.modal.onlineAcCode      = item.onlineAcCode 
                    this.modal.isUse             = item.isUse 
                    this.modal.distAcHttpSrc     = item.distAcHttpSrc
                    this.modal.onlineAcHttpSrc   = item.onlineAcHttpSrc
                    this.modal.distAcServerDir   = item.distAcServerDir
                    this.modal.onlineAcServerDir = item.onlineAcServerDir
                }
            },

            // 新增 | 修改 公司
            onSubmit(){
                if(!util.regCombination('*').test(this.modal.companyName)){
                    popup.alert({title:'请填写公司名称!'}); return false;
                }
                if(!util.regCombination('*').test(this.modal.companyCode)){
                    popup.alert({title:'请填写公司编码!'}); return false;
                }
                if(!util.regCombination('*').test(this.modal.distSocketSrc)){
                    popup.alert({title:'请填写 websocket 链接地址!'}); return false;
                }
                if(!util.regCombination('*').test(this.modal.distAcHttpSrc)){
                    popup.alert({title:'请填写集成 http 链接地址!'}); return false;
                }
                if(!util.regCombination('*').test(this.modal.onlineAcHttpSrc)){
                    popup.alert({title:'请填写正式 http 链接地址!'}); return false;
                }
                if(!util.regCombination('*').test(this.modal.distAcServerDir)){
                    popup.alert({title:'请填写集成环境活动路径!'}); return false;
                }
                if(!util.regCombination('*').test(this.modal.onlineAcServerDir)){
                    popup.alert({title:'请填写正式环境活动路径!'}); return false;
                }
                if(!util.regCombination('*').test(this.modal.distCode)){
                    popup.alert({title:'请填写集成权限code!'}); return false;
                }
                if(!util.regCombination('*').test(this.modal.distAcCode)){
                    popup.alert({title:'请填集成活动权限code!'}); return false;
                }
                if(!util.regCombination('*').test(this.modal.onlneCode)){
                    popup.alert({title:'请填正式权限code!'}); return false;
                }
                if(!util.regCombination('*').test(this.modal.onlineAcCode)){
                    popup.alert({title:'请填正式活动权限code!'}); return false;
                }

                util.ajax({
                    url:config.baseApi+this.modal.api,
                    data:this.modal,
                    success:data=>{
                        this.getCompanyList();
                        this.modal.show = false;
                        popup.miss({title:'操作成功!'})
                    }
                })


            },
           
        },
    }
</script>


